Scrapbox であそぼう2022夏
最初は GhostText っていう Chrome の拡張と VSCode の拡張を組み合わせて試してみたけど、割と予想通り Scrapbox が素の textarea じゃないので入力が壊れてダメだった それじゃあ Codespaces から js を配信して開発中は UserScript にその URL を入れればよいのでは？と試してみたがこれもまあ予想通り CSP にブロックされて読み込んでくれなかった deno で esbuild を watch で起動して、std/http/server で配信するだけというお手軽サーバーを作ったのだが.... しかし、これがCSP的にOKなんであれば UserScript に chrome-extension:// で埋め込むスクリプトを読むようにすればよいのでは...?と試してみると動いた
vite のビルド結果はエントリーポイントのファイルに import が書いてあるだけなんだけど、crxjs は割と豪快に web_accessible_resources に全てのアセットを指定しているのでネイティブの import でファイルが読まれてくるので問題なかった
しかし、deno 向けに書かれているのでそのままだと vite から使えないので dnt で変換してみることに deno.ns が解決できない問題に遭遇したがそっと消すとビルド自体は通ったので適当に publish してみる
...が Scrapbox の型が any になってしまう問題に遭遇 こいつがなかなかやっかいで、deno 側の型定義は node の events から引っ張ってきてて、EventEmitter が class で export されているせいなのかなんなのか、うまくそのままの変換では動かず かといって vite には events なんてモジュールはないので無理やり型フォージもできず
なぜなのか全くわからないけど、呼び出すモジュール側で EventEmitter と Scrapbox を別々で読んできたらこっちではうまく解決できるのでとりあえずのワークアラウンドとしてこれでいくことにした
やっとこ動くようになったら、最後は esbuild で1つのファイルにバンドルしてそいつを chrome-extension の URL と差し替えてやれば完成である
この雑な manifest で動くってことは、実は deno でビルドして watch しとけば開発できるのでは...?とおもむろに deno bundle でビルドするようにして、dist には manifest と1つの js がある状態で試してみると動いた こいつぁーいろいろ作れるな〜と早速 UI もあるような UserScript を作ってみようと
fresh を試していた時になんとなく preact 不信になってしまったので、ここは多少フットプリントでかくてもいいから react でたのもう！と react でかる〜く組んでみた 途中 hook が import できない謎状態に陥ったが、import_map をコネコネしてたらなんか治った、なんで治ったのかはよくわからない とりあえず簡単なスクリプト群ができあがったので、ビルドした js を esbuild で minify してコピペしようとしたら Too large! って言われてペーストできなかった
なるほどそういう制限もあるわけね〜...と react をやめて svelte だとか solid あたりでミニマルなフットプリントでどうにかできないか調べてみたけど、未知のライブラリを deno でバンドルしてもっていける未来が想像できなかったので諦めた 代わりに適当な UI で textarea を出現させて、そこに貼りつけたコードをチョップしてストリームで挿入できないか検討した
雑に試したら動いたので、まずは1文字ずつ wait を挟みながら実行したのだが、scrapbox は入力中はバッファして、ある程度入力が終わったら変更を反映する〜みたいな挙動をするので、1文字ずつだーっとやるよりはもう少し大きいチャンクで貼りつけていくのがよさそうだった
今度はチャンクを大きめにして、待ち時間を気持ち長めに設定したらどんどん書き足されていくようにはなったけどコードブロックからはみだしてしまう問題が発生してしまった
これは想像だけど、insert する時に \n だと特段処理が走らないけど、Enter の press で改行されるような気がする...
とおもって \n で分割して Enter を都度入力させながら試してみるとついに動くようになった
そういえば途中 Chakra UI 試したんだが、バンドルに失敗するようになっちゃって断念した deno界で使われている twind を使ってみてるけど、インテリセンスが効いたり効かなかったり(大抵効かない)で困っている あと成果物のコードをチラ見したけど、んーなんかそういう感じかーみたいな...
tailwind を cli で生成して UserCSS にぶち込む方式なんかどうかなあ...? play cdn 使えるといいんだけどな...